<template>
  <div v-show="showDialog" id="document-teacher">
    <div class="title-bar">
      <span class="text">管理课件</span>
      <span @click="closeDialog()" class="close">X</span>
    </div>
    <div class="title-body">
      <div id="bjy-document-manage"></div>
    </div>
  </div>
</template>

<script>
let eventEmitter = BJY.eventEmitter

export default {
  components: {},
  data () {
    return {
      document: null,
      showDialog: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    closeDialog () {
      this.showDialog = false
    }
  },
  created () {
    let that = this
    eventEmitter
      .on(
        'ZWZ_DOCUMENT',
        (e, data) => {
          that.showDialog = true
          if(!that.document){
            // 上传文件最大字节
            var MAXSIZE = 1000000 * 5;
            // 创建文档管理组件
            that.document = BJY.DocumentManage.create({
                // 父容器
                element: $('#bjy-document-manage'),
                // 文档操作按钮是图标还是文字
                needIconButton: true,
                // 上传文件最大字节
                maxSize: MAXSIZE,
                // 上传失败回调
                onFileUploadFail: function (data) {
                    // data.isPPT 上传的文件是否是 PPT
                    alert('上传失败');
                },
                // 文件大小错误
                onFileSizeError: function (data) {
                    // data.isPPT 上传的文件是否是 PPT
                    alert('上传文件太大');
                },
                // 文件类型错误
                onFileTypeError: function (data) {
                    // data.isPPT 上传的文件是否是 PPT
                    alert('文件类型错误');
                },
                // 文件名错误
                onFileNameError: function (data) {
                    // data.isPPT 上传的文件是否是 PPT
                    alert('文件名错误');
                },
                // 点击文件 item 回调
                onFileItemClick: function (data) {
                    // data.index  文档在列表中的索引
                    // data.doc 文档对象
                },
                onFileOpenClick: function (doc) {
                  eventEmitter.trigger(
                    eventEmitter.OPEN_DOC_IN_CATALOGUE,
                    {
                      docId: doc.id
                    }
                  )
                },
                // 删除文档回调
                onDocDeleteClick: function (data) {
                    // data.index  文档在列表中的索引
                    // data.doc 文档对象
                    that.$Dialog.show({
                      title: '删除文档',
                      content: `确定要删除此文档吗？`,
                      confirmText: '确定',
                      cancelText: '取消',
                    }).then(() => {
                      that.document.deleteDoc(data)
                    }).catch(e => {
                      console.log(e)
                    })
                }
            });
          }
        }
      )
  },
  mounted () {
  },
  beforeDestroy () { 
    this.document && this.document.destroy && this.document.destroy()
  }
}
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
  .title-body{
    margin-top: 30px;
    height: 100%;
  }
  
  #document-teacher {
    position: absolute;
    z-index: 9999;
    width: 610px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  .title-bar {
    position: absolute;
    top: 0;
    height: 30px;
    width: 100%;
    background: #444c63;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    .close {
      cursor: pointer;
    }
  }

  .placeholder {
    position: absolute;
    top: 30px;
    width: 100%;
    bottom: 0;
  }
</style>
